﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css" >
        header, nav, article, footer 
        {border:1px solid #ff6600;padding:5px; }
        header{width:500px;}
        nav{float:left;width:60px;height:100px;}
        article{float:left;width:428px;height:100px;}
        footer{width:500px;}
    </style>
</head>
<body>
<form id="form1">
    <!--IE8会显示不支持的文字，Chrome和Firefox会显示一个画布-->
    <canvas id="mycanvas" width="200" height="100" style="border:1px solid #ff6600">
        该浏览器不支持HTML5！
    </canvas>

    <p>Hello World!</p>

    <header>标题</header>
    <nav>导航</nav>
    <article>内容</article>
    <footer>底部说明</footer>

    <!--交互元素details-->
    <span onclick="span_click()">脚注</span>
    <details id="details1">
        <summary>啦啦啦啦啦啦啦</summary>
        aewfwf
    </details>

    <details open="open">
        <summary>页面说明</summary>啊哈哈哈哈哈
    </details>

    <!--菜单menu-->
    <menu style="border:1px solid #ff6600;width:200px;">
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
    </menu>

    <!--command用于定义各种类型的命令按钮(icon属性可以设置按钮的图片),必须放在menu中才能显示(只有IE才能用)-->
    <menu>
        <command label="单选框" type="radio" style="width:30px;">
        <command label="awfewaf" type="command" />
    </menu>

    <!--状态交互元素：progress 进度条-->
    <p id="ptip">进度提示</p>
    <progress value="0" max="100" id="progress1"></progress>
    <input type="button" value="进度条" onclick="btn_progressTest()" />

    <!--meter 显示所占的比例,可以用在投票上-->
    <p>
        张三：
        <meter value="30" optimum="100" low="1" high="99" max="100" min="0" id="zs"></meter>
        <span>30%</span>
        <input type="button" onclick="vote(1)" value="投票" />
    </p>
    <p>
        李四：
        <meter value="70" optimum="100" low="10" high="99" max="100" min="0" id="ls"></meter>
        <span>70%</span>
        <input type="button" onclick="vote(2)" value="投票" />
    </p>

    <!--节点元素 section 可以用于页面的内容分段-->
    <section draggable="true" style="border:1px solid #ff6600;width:250px;">
        <h1>AAA</h1>
        <p>Name:AAA; E-mail:aaa@aa.com</p>
    </section>

    <!--标题组 hgroup 常常与figcaption结合使用(chrome不支持)-->
    <hgroup draggable="true">
        <h1>标题H1</h1>
        <h2>标题H2</h2>
    </hgroup>

    <!--作者信息 address 标签中的内容会以斜体显示-->
    <address title="作者联系方式">
        Written by aaa<br />
        <a href="#">Email me</a>
    </address>

    <!--文本层次语义,突出文本间的层次关系-->
    <time datetime="2015-08-07">
        <!--用于定义时间或日期-->
        今天是2015年08月07日
    </time>
    <time datetime="2015-08-07 16:30:00" pubdate="true">
        <!--用于定义时间或日期-->
        今天是2015年08月07日 16点30分00秒
    </time>

    <!--mark 高亮处理文字-->
    <p>
        一个XXX，必须有<mark>扎实</mark>的技术，<mark>过硬</mark>的实力。
    </p>

    <!--cite 引用的书名,用斜体显示书名-->
    <p>这真是一篇极好的文档</p>
    <p>--引自<cite>乱扯语录</cite></p>

    <!--iframe在html5中只有src,sandbox属性，sandbox可以控制对父页面的访问之类的-->
    <div><iframe src="#" sandbox="allow-scripts"></iframe></div>

    <!--公共属性 contenteditable 可以对页面中显示的元素进行编辑-->
    <div>
        <article contenteditable="true" id="at0">啊啊啊啊啊</article>
        <input type="button" value="Save" onclick="SaveAt0()" />
        <article id="at1"></article>
    </div>
    <br /><br /><br /><br /><br /><br />

    <!--新增的Input类型-->
    <div>
        <p>
            邮件<input type="email" multiple /><!--multiple代表允许用逗号分隔多个Email-->
            不检测是否为空，不为空时检测其是否为标准的email格式
        </p>
        <p>Web地址<input type="url" /></p>
        <p>
            数字<input type="number" max="100" min="0" step="5" />
            超出范围或者不是整数都会提示错误
        </p>
        <p>
            数字滑动条
            R<input type="range" id="txtR" value="0" min="0" max="255" onchange="setSpanColor()" />
            G<input type="range" id="txtG" value="0" min="0" max="255" onchange="setSpanColor()" />
            B<input type="range" id="txtB" value="0" min="0" max="255" onchange="setSpanColor()" />
            <span id="pcolor">rgb(0,0,0)</span>
            <span id="spanPrev">ShowColor</span>
        </p>
        <p>
            <fieldset>
                <legend>日期与时间类型输入框</legend>
                <input type="date" />
                <input type="time" />
            </fieldset>
            <fieldset>
                <legend>月份与星期类型输入框</legend>
                <input type="month" />
                <input type="week" />
            </fieldset>
            <fieldset>
                <legend>日期时间类型输入框</legend>
                <input type="datetime" />
                <input type="datetime-local" />
            </fieldset>
        </p>
        <p>搜索<input type="search" /></p>
        <p><input type="submit" value="提交" /></p>
    </div>

    <!--input新增的公用属性-->
    <div>
        <p>自动获得焦点<input type="text" autofocus /></p>
        <p>正则:只能输入数字<input type="text" pattern="^\d+$" /></p>
        <p>占位文本(获取焦点时文本消失)：<input type="text" placeholder="请输入AAAAA" /></p>
        <p>必填属性：<input type="text" required /></p>
    </div>

    <!--新增的表单元素-->
    <div>
        <fieldset>
            <legend>datalist</legend>
            辅助表单中文本框的输入，本身是隐藏的。与文本框的list属性绑定，点击文本框时显示选项<br />
            <input type="text" list="jobList" />
            <datalist id="jobList">
                <option value="程序员"></option>
                <option value="架构师"></option>
                <option value="DBA"></option>
            </datalist>
        </fieldset>
        <fieldset>
            <legend>output</legend>
            从属于某个form，可以显示页面中不同类型表单元素的内容
            <input type="text" id="txtNum1" />X<input type="text" id="txtNum2" />=
            <output onforminput="value = txtNum1.value*txtNum2.value"></output>
        </fieldset>
        <fieldset>
            <legend>keygen</legend>
            生成对应位数的密钥发送给服务器
            <keygen name="keyUserinfo" id="keyU" />            
        </fieldset>
    </div>

    <script type="text/javascript">
        //details显示隐藏
        function span_click() {
            var obj = document.getElementById("details1");
            var att = obj.getAttribute("open");

            if (att == "open") {
                obj.removeAttribute("open");
            } else {
                obj.setAttribute("open", "open");
            }
        }

        //进度条的使用
        var proValue = 0;
        var Timer;
        var objPro = document.getElementById("progress1");
        var objTip = document.getElementById("ptip");
        function Interval_handler() {
            objPro.value = ++proValue;
            if (proValue > objPro.max) {
                clearInterval(Timer);
                objTip.innerHTML = "Complete!";
            } else {
                objTip.innerHTML = "Loading:" + objPro.value + "%";
            }
        }
        function btn_progressTest() {
            Timer = setInterval(Interval_handler, 100);
        }

        //比例条
        function vote(obj) {
            var objMeter;
            if (obj == "1")
                objMeter = document.getElementById("zs");
            else
                objMeter = document.getElementById("ls");

            var curNum = objMeter.value;
            if (curNum < objMeter.max) {
                objMeter.value = ++curNum;
            }
        }

        //保存article
        function SaveAt0() {
            var originalText = document.getElementById("at0").innerHTML;
            document.getElementById("at1").innerHTML = "编辑后的内容:" + originalText;
        }

        //数字滑动条
        function setSpanColor() {
            var R = document.getElementById("txtR").value;
            var G = document.getElementById("txtG").value;
            var B = document.getElementById("txtB").value;
            var strColor = "rgb(" + R + "," + G + "," + B + ")";
            document.getElementById("pcolor").innerHTML = strColor;
            document.getElementById("spanPrev").style.backgroundColor = strColor;
        }

    </script>
</form>
</body>
</html>
